<script>
import * as echarts from "echarts";

export default {
  name: "circular-chart",
  props: {
    domId: {type:String},
    title: {type:String},
    data: {type: Array, default: []}
  },
  watch: {
    data(val) {
      this.chartInit();
    }
  },
  methods: {
    chartInit() {
      let dom = document.getElementById(this.domId);
      const chart = echarts.init(dom);
      const options = {
        title: {
          text: this.title,
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: this.data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      chart.setOption(options);
    },
  }
}
</script>

<template>
  <div>
    <div :id="domId" style="width: 100%;height: 200px"></div>
  </div>
</template>

<style scoped lang="scss">

</style>
